<template>
	<view class="page">

		<view class="nav_bar" style="background-color: rgba(249, 227, 230, 1);">
			<uni-nav-bar color="#333" left-icon="left"
				right-text="打赏记录"
				title="打赏主页"
				:border='false' :fixed="true" background-color="transparent" @clickLeft="$native.backAction()"
				@clickRight="onclickRight"></uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>

		<view class="card flex_center">
			<view class="left flex_center">
				<view class="avatar">
					<image :src="provider.avatar" mode="aspectFill">
				</view>

				<view class="text">
					<view class="nickname">{{ provider.nickname || '~' }}</view>
					<view class="order-num">接单300+ </view>
				</view>
			</view>

			<view class="right flex_center" @click="$native.toChat({
					nickName: provider.nickname,
					avatar: provider.avatar,
					user_id: provider.user_id,
				})">
				<image :src="$util.prefix('public/ic_liaotian.png')" mode="aspectFill"></image>
				<text>私信</text>
			</view>
		</view>

		<view class="content">
			<view class="content-title">服务不错，值得打赏</view>
			<view class="content-text">打赏给服务人员，圈主设置了30%的抽成比例</view>

			<view class="grid">
				<u-grid :column="3">
					<u-grid-item v-for="(item,index) in config" :key="index" @click="price = item.value">
						<view class="item flex_c" :id="price == item.value ? 'select' : ''">
							<image
								:src="item.image"
								mode="aspectFill"></image>

							<view class="price flex_center">
								<text>￥</text>
								<view>{{ item.value }}</view>
							</view>
						</view>


					</u-grid-item>

					<u-grid-item @click="show = true">
						<view class="item flex_r_around nopadding">
							<view class="other">
								其他金额
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<button @click="onOther">打赏</button>

		</view>

		<u-popup :show="show" mode="center" bgColor="transparent" @close="show = false">
			<view class="popup flex_c">
				<view class="popup-title">感谢您的一份心意</view>

				<view class="popup-input flex_center">
					<text>￥</text>
					<input type="number" placeholder="最大金额3000" placeholder-class="input-placeholder" v-model="price" />
				</view>

				<view class="popup-btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show = false">
						<text>再想想</text>
					</view>

					<view class="item comfirm flex_r_around" @click="onOther">
						<text>打赏</text>
					</view>
				</view>

			</view>
		</u-popup>
		
		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price flex_center" style="align-items: flex-start;">
					<i>￥</i>
					<text>{{ price }}</text>
				</view>
				<view class="pay_type">
		
					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>
		
						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>
		
					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>
		
						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>
		
		
				</view>
				<view class="btn" @click="onSubmit">打赏</view>
			</view>
		</u-popup>
		
		

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				price: 0,

				show: false,
				
				config: [],
				
				provider: {},
				order_id: 0,
				circle_id: 0,
				store_id: 0,
				provider_id: 0,
				
				
				order_id_pay: 0,
				
				to_pay_show: false,
				
				pay_type: 2,
			}
		},
		methods: {
			onOther(){
				
				this.show  =false;
				this.to_pay_show = true;
				
				// this.$post('/order/activeReward',{
				// 	order_id: this.order_id,
				// 	price: this.price,
				// 	circle_id: this.circle_id,
				// 	store_id: this.store_id,
				// 	provider_id: this.provider_id,
				// }).then(res=>{
				// 	this.show = false;
				// 	this.order_id_pay = res.data.order_id;
				// 	this.$native.orderPay({
				// 		order_id: res.data.order_id,
				// 		type: 21,
				// 		pay_type: 1
				// 	});
				// })
			},
			
			// 配置打赏
			onSubmit(){
				if(!this.price){
					return this.$util.msg('请选择打赏金额');
				}
				if(this.price > 3000){
					return this.$util.msg('打赏金额不可超过3000元')
				}
				// type: 21
				this.$post('/order/activeReward',{
					order_id: this.order_id,
					price: this.price,
					circle_id: this.circle_id,
					store_id: this.store_id,
					provider_id: this.provider_id,
				}).then(res=>{
					this.show = false;
					this.order_id_pay = res.data.order_id;
					this.$native.orderPay({
						order_id: res.data.order_id,
						type: 21,
						pay_type: this.pay_type
					});
				})
			},
			
			getConfig(){
				this.$post('/order/getRewardConfig').then(res=>{
					this.config = res.data;
				});
			},
			
			getUser(){
				this.$get('/provider/getProviderInfo', {
					provider_id: this.provider_id,
				}).then(res => {
					this.provider = res.data;
				})
			},
			
			paySuccess() {
				this.$util.msg('支付成功');
				this.getPayStatus();
			},
			
			payFail() {
				this.$util.msg('用户取消支付');
			},
			
			getPayStatus(){
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id_pay,
					type: 21,
				}, false);
			},
			
			onclickRight(){
				this.$util.toUrl(`/pages/order/rewardList?order_id=${this.order_id}`)
			},
			
		},
		
		onLoad(option){
			this.provider_id = option.provider_id;
			this.order_id = option.order_id;
			this.circle_id = option.circle_id;
			this.store_id = option.store_id;
			
			this.getConfig();
			this.getUser();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #F9E3E6 0%, #F1F1F1 60%);
		padding: 12rpx 24rpx 36rpx;
	}

	.card {
		background: linear-gradient(180deg, #FFEBF2 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 48rpx 32rpx;
		overflow: hidden;

		.left {
			flex: 1;
			overflow: hidden;

			.avatar {
				background: #EFEFEF;
				width: 112rpx;
				height: 112rpx;
				border-radius: 56rpx;
				overflow: hidden;
				margin-right: 16rpx;

				image {
					width: 112rpx;
					height: 112rpx;
				}
			}

			.text {
				flex: 1;
				overflow: hidden;

				.nickname {
					font-weight: 500;
					font-size: 36rpx;
					color: #131313;
					line-height: 50rpx;
				}

				.order-num {
					font-size: 26rpx;
					color: #999999;
					line-height: 28rpx;
					margin-top: 16rpx;
				}
			}
		}

		.right {
			margin-left: 24rpx;
			width: 160rpx;
			height: 64rpx;
			background: #FD2A53;
			border-radius: 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 8rpx 0 32rpx;
			}

			text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

	}

	.content {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx 32rpx 60rpx;
		margin-top: 20rpx;

		.content-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.content-text {
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
		}

		.grid {
			margin-top: 68rpx;

			#select {
				border: 4rpx solid #FD2A53;
			}

			.item {
				margin-bottom: 24rpx;
				padding-top: 24rpx;
				width: 168rpx;
				height: 168rpx;
				background: #FDF9FA;
				border-radius: 16rpx;
				border: 4rpx solid #FDF9FA;

				image {
					width: 64rpx;
					height: 64rpx;
				}

				.other {
					font-weight: 500;
					font-size: 28rpx;
					color: #FD2A53;
				}

				.price {
					align-items: flex-end;
					margin-top: 12rpx;

					text {
						font-size: 24rpx;
						color: #FD2A53;
						line-height: 32rpx;
					}

					view {
						font-size: 32rpx;
						color: #FD2A53;
						line-height: 32rpx;
					}
				}
			}

			.nopadding {
				padding: 0;
			}

		}

		button {
			width: 552rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			margin-top: 40rpx;
		}

	}

	.popup {
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 50rpx 44rpx 54rpx;

		.popup-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
		}

		.popup-input {
			margin: 32rpx 0;
			width: 472rpx;
			height: 96rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			padding: 0 26rpx;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
				margin-right: 8rpx;
			}

			input {
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
		}

		.popup-btn {
			width: 472rpx;

			.item {
				width: 224rpx;
				height: 88rpx;
				border-radius: 44rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
				}
			}

			.cancel {
				background: #F1F1F1;

				text {
					color: #333333;
				}
			}

			.comfirm {
				background: #FD2A53;

				text {
					color: #FFFFFF;
				}
			}
		}
	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	
		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}
	
		.price {
			margin: 34rpx 0 24rpx;
	
			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}
	
			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}
	
		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;
	
			.item {
				height: 100rpx;
				padding: 0 32rpx;
	
				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}
	
					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}
	
				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}
	
					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}
	
		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	
	}

</style>